<template>
    <div class="snow-page">
        <div class="snow-inner-page">
            <a-form :model="formData.form" :label-col-props="{ span: 5 }" :wrapper-col-props="{ span: 18 }"
                ref="formRef">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item field="name" label="用户名">
                            <a-input v-model="formData.form.name" placeholder="用户名" allow-clear />
                        </a-form-item>

                    </a-col>
                    <a-col :span="6">

                        <a-form-item field="phone" label="手机号">
                            <a-input v-model="formData.form.phone" placeholder="手机号" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-space>
                            <a-button type="primary" @click="onSearch">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <template #default>查询</template>
                            </a-button>
                            <a-button @click="onReset">
                                <template #icon>
                                    <icon-refresh />
                                </template>
                                <template #default>重置</template>
                            </a-button>
                            <a-button type="primary" @click="onAdd">
                                <template #icon>
                                    <icon-PlusOutlined />
                                </template>
                                <template #default>新增</template>
                            </a-button>
                        </a-space>
                    </a-col>
                </a-row>
            </a-form>
            <a-table :data="tableData" row-key="id" size="small" bordered :pagination="false">
                <template #columns>
                    <a-table-column title="姓名">
                        <template #cell="{ record }">
                            {{ record.name }}
                        </template>
                    </a-table-column>
                    <a-table-column title="性别">
                        <template #cell="{ record }">
                           
                            <span v-if="record.sex==55">男</span>
                            <span v-else-if="record.sex==56">女</span>
                            <span v-else>未知</span>
                        </template>
                    </a-table-column>
                    <a-table-column title="电话">
                        <template #cell="{ record }">
                            {{ record.phone }}
                        </template>
                    </a-table-column>
                    <a-table-column title="邮箱">
                        <template #cell="{ record }">
                            {{ record.email }}
                        </template>
                    </a-table-column>
                    <a-table-column title="新增时间">
                        <template #cell="{ record }">
                            {{ timestampToTime(record.atime) }}
                        </template>
                    </a-table-column>

                    <a-table-column title="操作" align="center" fixed="right">
                        <template #cell="{ record }">
                            <a-space>
                                <a-button size="mini" type="primary" @click="onEdit(record)">修改</a-button>
                                <a-button size="mini" type="primary" status="danger"
                                    @click="onDelete2(record)">删除</a-button>
                            </a-space>
                        </template>
                    </a-table-column>
                </template>
            </a-table>
            <a-pagination :total="total" style="margin-top:10px;" @change="changePage" />
        </div>

        <a-modal v-model:visible="visible" :footer="false" width="40%">
            <template #title>
                新增用户
            </template>
            <div>
                <a-form ref="formRef" :model="form" @submit="handleSubmit">

                    <a-form-item field="name" label="姓名" :rules="[{ required: true, message: '姓名不能为空' }]">
                        <a-input v-model="form.name" placeholder="请输入姓名" />
                    </a-form-item>
                    <a-form-item field="sex" label="性别">
                        <a-select v-model="form.sex" placeholder="请选择性别" allow-clear>
                            <a-option value="55"> 男</a-option>
                            <a-option value="56">女</a-option>
                            <a-option value="57">未知</a-option>
                        </a-select>
                    </a-form-item>

                    <a-form-item field="phone" label="电话" :rules="[{ required: true, message: '电话不能为空' }]">
                        <a-input v-model="form.phone" placeholder="请输入电话" />
                    </a-form-item>
                    <a-form-item field="email" label="Email" :rules="[{ required: true, message: '邮箱不能为空' }]">
                        <a-input v-model="form.email" placeholder="请输入邮箱" />
                    </a-form-item>

                    <a-form-item>
                        <a-space>
                            <a-button html-type="submit">提交</a-button>
                            <a-button @click="$refs.formRef.resetFields()">重置</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { Modal, Message } from "@arco-design/web-vue";
import { getConcactAPI, addConcactAPI, updateConcactAPI,deleteConcactAPI } from "@/api/modules/concact/index"

import { onMounted } from "vue";

onMounted(() => {
    init();
});
const visible = ref(false)
function timestampToTime(timestamp) {
    let date = new Date(timestamp); // 如果时间戳是10位数，则需要乘以1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
async function init() {
    let obj = {
        paged: formData.paged,
        pageSize: formData.pageSize
    }
    let res = await getConcactAPI(obj, formData.form);
    total.value = 0
    tableData.value = [];
    if (res.status == 2) {
        total.value = res.data.totalCount;
        tableData.value = res.data.data;
    }
}

const handleSubmit = async ({ values, errors }) => {
    console.log('values:', values, '\nerrors:', errors)
    if (errors) {
        return
    }
    if (form.id) {
        let res = await updateConcactAPI(values) as any
        if (res.status == 2) {
            Message.success("操作成功")
        } else {
            Message.error(res.statusMsg)
        }
    } else {
        let res = await addConcactAPI(values) as any
        if (res.status == 2) {
            Message.success("操作成功")
        } else {
            Message.error(res.statusMsg)
        }
    }
    init();
    visible.value = false
}

const form = reactive({
    name: "",
    sex: "",
    phone: "",
    email: "",
    id: ""
})

const total = ref(0)

const tableData = ref([]);
const formData = reactive({
    form: {
        name: "",
        phone: "",
        user_id: "1"
    },
    paged: 1,
    pageSize: 10
});

const formRef = ref();
const onReset = () => {
    formRef.value.resetFields();
    init();
};

function changePage(page) {
    formData.paged = page;
    init()
}

function onSearch() {
    init();
}
function onAdd() {
    form.name = ""
    form.sex = ""
    form.phone = ""
    form.email = ""
    form.id = ""
    visible.value = true
}

const onEdit = (row: any) => {
    form.name = row.name
    form.sex = row.sex
    form.phone = row.phone
    form.email = row.email
    form.id = row.id
    visible.value = true
};

const onDelete2 = (row: any) => {
    Modal.warning({
        title: "提示",
        content: "确定删除？",
        hideCancel: false,
        closable: true,
        onOk: async () => {
            try {
                let res = (await deleteConcactAPI(row.id)) as any;
                if (res.status == 2) {
                    Message.success("删除成功");
                } else {
                    Message.error(res.statusMsg);
                }
                init();
            } catch { }
        }
    });
};
</script>

<style lang="scss">
.arco-modal-body {
    text-align: center !important;
}

::v-deep .arco-table-size-small .arco-table-thead .arco-table-cell {
    padding: 2px 16px !important;
    text-align: center !important;
}
</style>